<!-- 该模块传入img，格式为：
         "image"		:	[{},{},...,{}]
         其中每个{}:
         {
            "imge_real"	:	{
                "path"	:	String 为imge_real的路径,
                "tag"	:	String 为imge_real的标签,
            },
            "imge_adv"	:	{
                "path"	:	String 为imge_adv的路径,
                "tag"	:	String 为imge_adv的标签,
            }
        }
        例子：
        [{
            'imge_real': {
                'path': r'http://localhost:8000/static/uploads/DSC02359.JPG',
                'tag': 'this is tag'
            },
            'imge_adv': {
                'path': r'http://localhost:8000/static/uploads/DSC02360.JPG',
                'tag': 'this is adv tag'
            }
        }]
会对该imge进行展示

注：使用全局事件总线，这样可以做到随时更新，好像prop不太行
 -->
<template>
  <div class="showimg">
    <el-divider>对抗样本对比展示</el-divider>
    <template v-if="show_img.length">
      <div class="image-gallery">
        <el-row v-for="(item, index) in show_img" :key="index" class="image-row">
          <el-col :span="12">
            <el-card :body-style="{ padding: '3px' }" shadow="hover" class="card-container">
              <el-image
                  :src="item.imge_real.path"
                  class="image"
                  fit="cover"
                  @click="convertToFile(item)"
                  lazy
                  :preview-src-list="[item.imge_real.path,item.imge_adv.path]">
              </el-image>
              <div style="padding: 14px;">
                <span>{{ item.imge_real.tag }}</span>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card :body-style="{ padding: '3px' }" shadow="hover" class="card-container">
              <el-image
                  :src="item.imge_adv.path"
                  class="image"
                  fit="contain"
                  @click="convertToFile(item)"
                  lazy
                  :preview-src-list="[item.imge_adv.path,item.imge_real.path]">
              </el-image>
              <div style="padding: 14px;">
                <span>{{ item.imge_adv.tag }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </template>

  </div>
</template>

<script>


import axios from "axios";

export default {
  name: 'ShowImg',
  props: {
    name: String,
    modeling: Object  },
  data() {







    return {
      show_img: [],
      fileList: []
    }
  },

  mounted() {
    this.$bus.$on('img_pass', (images) => {
      this.show_img = images
      console.log(this.modeling)
      console.log(this.name)
      // images.forEach(item=>{
      //   this.$convertToFile(item,this.name,this.modeling)
      // })

    // :name="'FGSM'" :modeling="formdata"
      // {"img_dir":"./Adversarial_Images/FGSM_ResNet_20240903_162638"}
    })
  },
  methods: {
    convertToFile() {

    },
  }
}
</script>
<style scoped>
.image {
  width: 224px;
  height: 224px;
  object-fit: fill;
}

.image-gallery {
  min-height: 50vh;
  max-height: 65vh;
  overflow-y: auto;
}

.image-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
}
</style>
